<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    #es6-method,
    #generator,
    #anon-generator,
    #named-function-expression,
    #anon-function-expression,
    #returned-function,
    #constructed-function,
    #constructed-function-with-body-string,
    #multiple-assignment {
      border: 1px solid #000;
      width: 200px;
      min-height: 1em;
      cursor: pointer;
    }
    </style>
    <script type="application/javascript;version=1.8">
      let namedFunctionExpression =
      function foo() {
        alert("namedFunctionExpression");
      }

      let anonFunctionExpression = function() {
        alert("anonFunctionExpression");
      };

      let returnedFunction = (function() {
        return function bar() {
          alert("returnedFunction");
        }
      })();

      let constructedFunc = new Function();

      let constructedFuncWithBodyString =
        new Function('a', 'b', 'c', 'alert("constructedFuncWithBodyString");');

      let multipleAssignment = foo = bar = function multi() {
        alert("multipleAssignment");
      }

      function init() {
        let he = new handleEventClick();
        let es6Method = document.getElementById("es6-method");
        es6Method.addEventListener("click", he.es6Method);

        let generatorNode = document.getElementById("generator");
        generatorNode.addEventListener("click", generator);

        let anonGenerator = document.getElementById("anon-generator");
        anonGenerator.addEventListener("click", function* () {
          alert("anonGenerator");
        });

        let namedFunctionExpressionNode =
          document.getElementById("named-function-expression");
        namedFunctionExpressionNode.addEventListener("click",
                                                     namedFunctionExpression);

        let anonFunctionExpressionNode =
          document.getElementById("anon-function-expression");
        anonFunctionExpressionNode.addEventListener("click",
                                                     anonFunctionExpression);

        let returnedFunctionNode = document.getElementById("returned-function");
        returnedFunctionNode.addEventListener("click", returnedFunction);

        let constructedFunctionNode =
          document.getElementById("constructed-function");
        constructedFunctionNode.addEventListener("click", constructedFunc);

        let constructedFunctionWithBodyStringNode =
          document.getElementById("constructed-function-with-body-string");
        constructedFunctionWithBodyStringNode
          .addEventListener("click", constructedFuncWithBodyString);

        let multipleAssignmentNode =
          document.getElementById("multiple-assignment");
        multipleAssignmentNode.addEventListener("click", multipleAssignment);
      }

      function handleEventClick(hehe) {

      }

      handleEventClick.prototype = {
        es6Method() {
          alert("obj.es6Method");
        }
      };

      function* generator() {
        alert("generator");
      }
    </script>
  </head>
  <body onload="init();">
    <h1>Events test 3</h1>
    <div id="es6-method">ES6 method</div>
    <div id="generator">Generator</div>
    <div id="anon-generator">Anonymous Generator</div>
    <div id="named-function-expression">Named Function Expression</div>
    <div id="anon-function-expression">Anonymous Function Expression</div>
    <div id="returned-function">Returned Function</div>
    <div id="constructed-function">Constructed Function</div>
    <div id="constructed-function-with-body-string">
      Constructed Function with body string
    </div>
    <div id="multiple-assignment">Multiple Assignment</div>
  </body>
</html>
